﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {

    interface IProgressCellTypeParam {
        DefaultValue: any;
        strokeWidth: number;
        color: string;
        disabled: boolean;
        trackColor: string;
        pivotText: string;
        textColor: string;
        pivotColor: string;
        showPivot: boolean;
    }

    export class ProgressCellType extends VantCellTypeBase<IProgressCellTypeParam> {
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;
            const option = {
                el: "#" + this.uId,
                template: `
<van-progress
:percentage="percentage"
:stroke-width="strokeWidth"
:color="color"
:track-color="trackColor"
:pivot-text="pivotText"
:pivot-color="pivotColor"
:text-color="textColor" 
:show-pivot="showPivot" />`,
                data() {
                    return {
                        percentage: 0,
                        ...cellType,
                        showPivot: !!cellType.showPivot,
                        ...self.convertToCssColor(cellType)
                    };
                },
                methods: {
                    getValue() {
                        return this.percentage;
                    },
                    setValue(value) {
                        const percentage = Number(value);
                        if (!isNaN(percentage)) {
                            this.percentage = percentage;
                        }
                    }
                },
                mounted() {
                    self.fontDom = $(this.$el).find(".van-progress__pivot");
                    $(`#${self.uId}`).addClass("fgc-progress-container");
                },
                updated() {
                    self.setFontToDom();
                }
            };

            this.createVueApp(option);

            this.onDependenceCellValueChanged(() => {
                if (this.isFormula(cellType.pivotText)) {
                    this.vue.pivotText = this.getPivotText();
                }
            });

            this.vue.pivotText = this.getPivotText();

            super.onPageLoaded(info);
        }

        private getPivotText(): any {
            const { pivotText } = this.cellType;
            return this.evaluateFormula(pivotText);
        }

        private convertToCssColor(cellType: IProgressCellTypeParam): any {
            const result: any = {};
            result.trackColor = Forguncy.ConvertToCssColor(cellType.trackColor);
            result.color = Forguncy.ConvertToCssColor(cellType.color);
            result.textColor = Forguncy.ConvertToCssColor(cellType.textColor);
            result.pivotColor = Forguncy.ConvertToCssColor(cellType.pivotColor);
            return result;
        }

        public clickable() {
            return false;
        }

        public ChangeProgressStatus(
            pivotText: string,
            pivotColor: string,
            textColor: string,
            color: string): void
        {
            if (!this.isEmpty(pivotText)) {
                this.vue.pivotText = pivotText;
            }
            if (!this.isEmpty(pivotColor)) {
                this.vue.pivotColor = Forguncy.ConvertToCssColor(pivotColor);
            }
            if (!this.isEmpty(textColor)) {
                this.vue.textColor = Forguncy.ConvertToCssColor(textColor);
            }
            if (!this.isEmpty(color)) {
                this.vue.color = Forguncy.ConvertToCssColor(color);
            }
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Progress, Vant", VantCellTypes.ProgressCellType);